

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
  <link rel="icon" href="/img/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Han Qiu">
  <meta name="keywords" content="">
  
    <meta name="description" content="一、css基本用法1、css语法1234选择器 &amp;#123;    属性名: 属性值;    属性名: 属性值;&amp;#125;  2、css应用方式2.1、行内样式，使用HTML标签的style属性定义1&lt;h2 style&#x3D;&quot;color: red;&quot;&gt;行内样式&lt;&#x2F;h2&gt;  2.2、内部样式，通过页面中的style标签定义12345&lt;style&gt;">
<meta property="og:type" content="article">
<meta property="og:title" content="css基础">
<meta property="og:url" content="http://example.com/2022/02/14/css%E5%9F%BA%E7%A1%80/index.html">
<meta property="og:site_name" content="寒秋の博客">
<meta property="og:description" content="一、css基本用法1、css语法1234选择器 &amp;#123;    属性名: 属性值;    属性名: 属性值;&amp;#125;  2、css应用方式2.1、行内样式，使用HTML标签的style属性定义1&lt;h2 style&#x3D;&quot;color: red;&quot;&gt;行内样式&lt;&#x2F;h2&gt;  2.2、内部样式，通过页面中的style标签定义12345&lt;style&gt;">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%88%97%E8%A1%A8%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E8%A1%A8%E6%A0%BC%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%AE%9A%E4%BD%8D%E7%B1%BB%E5%9E%8B.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%8F%82%E8%80%83%E7%82%B91.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%8F%82%E8%80%83%E7%82%B92.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%8F%82%E8%80%83%E7%82%B9%E9%97%AE%E9%A2%98.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BB%A5%E7%9B%92%E5%AD%90%E4%B8%BA%E5%8F%82%E8%80%83%E7%82%B9.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%E5%B0%8F%E6%8A%80%E5%B7%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E4%B8%8E%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E6%BC%94%E7%A4%BA1.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E6%BC%94%E7%A4%BA2.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E6%BC%94%E7%A4%BA3.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E9%A2%9D%E5%A4%96%E6%A0%87%E7%AD%BE%E6%B3%951.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E9%A2%9D%E5%A4%96%E6%A0%87%E7%AD%BE%E6%B3%952.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%88%B6%E5%85%83%E7%B4%A0overflow1.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%88%B6%E5%85%83%E7%B4%A0overflow2.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/after%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B3%951.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/after%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B3%952.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%8F%8C%E4%BC%AA%E5%85%83%E7%B4%A01.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%8F%8C%E4%BC%AA%E5%85%83%E7%B4%A02.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/ie%E5%85%BC%E5%AE%B91.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/ie%E5%85%BC%E5%AE%B93.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/ie%E5%85%BC%E5%AE%B94.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/margin%E5%A1%8C%E9%99%B7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%AD%90%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AEmargin.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%88%B6%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AEborder%E5%AD%90%E5%85%83%E7%B4%A0%E5%86%8D%E8%AE%BE%E7%BD%AEmargin.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E5%92%8C%E6%A0%87%E5%87%86%E6%B5%81%E7%88%B6%E7%9B%92%E5%AD%90.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E4%B8%80%E4%B8%AA%E7%9B%92%E5%AD%90%E6%B5%AE%E5%8A%A8.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%A4%9A%E4%B8%AA%E7%9B%92%E5%AD%90%E6%B5%AE%E5%8A%A8.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/display%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/visibility%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/outline%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/overflow%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/cursor%E5%B1%9E%E6%80%A7.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/css%E5%B1%9E%E6%80%A7%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F.png">
<meta property="og:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6.png">
<meta property="article:published_time" content="2022-02-14T03:34:39.000Z">
<meta property="article:modified_time" content="2022-02-14T06:46:11.931Z">
<meta property="article:author" content="Han Qiu">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7.png">
  
  
  <title>css基础 - 寒秋の博客</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null,"path":"window.location.pathname","ignore_local":false}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.0.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>blogs</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="css基础">
              
            </span>

            
              <div class="mt-3">
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-02-14 11:34" pubdate>
        2022年2月14日 中午
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      8k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      67 分钟
    </span>
  

  
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">css基础</h1>
            
            <div class="markdown-body">
              <h3 id="一、css基本用法"><a href="#一、css基本用法" class="headerlink" title="一、css基本用法"></a>一、css基本用法</h3><h4 id="1、css语法"><a href="#1、css语法" class="headerlink" title="1、css语法"></a>1、css语法</h4><figure class="highlight css"><table><tr><td class="gutter"><div class="code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><pre><code class="hljs css">选择器 &#123;<br>    属性名: 属性值;<br>    属性名: 属性值;<br>&#125;<br></code></pre></td></tr></table></figure>

<h4 id="2、css应用方式"><a href="#2、css应用方式" class="headerlink" title="2、css应用方式"></a>2、css应用方式</h4><h5 id="2-1、行内样式，使用HTML标签的style属性定义"><a href="#2-1、行内样式，使用HTML标签的style属性定义" class="headerlink" title="2.1、行内样式，使用HTML标签的style属性定义"></a>2.1、行内样式，使用HTML标签的style属性定义</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">h2</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color: red;&quot;</span>&gt;</span>行内样式<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="2-2、内部样式，通过页面中的style标签定义"><a href="#2-2、内部样式，通过页面中的style标签定义" class="headerlink" title="2.2、内部样式，通过页面中的style标签定义"></a>2.2、内部样式，通过页面中的style标签定义</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-selector-tag">h2</span> &#123;</span><br><span class="css">        <span class="hljs-attribute">color</span>: red;</span><br><span class="css">    &#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="2-3、外部样式，引入外部css文件"><a href="#2-3、外部样式，引入外部css文件" class="headerlink" title="2.3、外部样式，引入外部css文件"></a>2.3、外部样式，引入外部css文件</h5><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment">&lt;!-- 方法一 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/css&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;css文件路径&quot;</span>&gt;</span><br><br><span class="hljs-comment">&lt;!-- 方法二 --&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">    <span class="hljs-keyword">@import</span> <span class="hljs-string">&quot;css文件路径&quot;</span>;</span><br><span class="css">    <span class="hljs-keyword">@import</span> url(<span class="hljs-string">&quot;css文件路径&quot;</span>);</span><br><span class="css">&lt;style&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="二、选择器"><a href="#二、选择器" class="headerlink" title="二、选择器"></a>二、选择器</h3><h4 id="1、基础选择器"><a href="#1、基础选择器" class="headerlink" title="1、基础选择器"></a>1、基础选择器</h4><h5 id="1-1、标签选择器"><a href="#1-1、标签选择器" class="headerlink" title="1.1、标签选择器"></a>1.1、标签选择器</h5><ul>
<li>直接使用标签名称<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">p</span> &#123;<br>    <span class="hljs-attribute">color</span>: red;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="1-2、类选择器"><a href="#1-2、类选择器" class="headerlink" title="1.2、类选择器"></a>1.2、类选择器</h5><ul>
<li>使用.<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.class1</span> &#123;<br>    <span class="hljs-attribute">color</span>: red;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="1-3、ID选择器"><a href="#1-3、ID选择器" class="headerlink" title="1.3、ID选择器"></a>1.3、ID选择器</h5><ul>
<li>使用#，且唯一<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-id">#id1</span> &#123;<br>    <span class="hljs-attribute">color</span>: red;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="1-4、通配符选择器"><a href="#1-4、通配符选择器" class="headerlink" title="1.4、通配符选择器"></a>1.4、通配符选择器</h5><ul>
<li>使用*<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css">* &#123;<br>    <span class="hljs-attribute">color</span>: red;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="2、复杂选择器"><a href="#2、复杂选择器" class="headerlink" title="2、复杂选择器"></a>2、复杂选择器</h4><h5 id="2-1、复合选择器"><a href="#2-1、复合选择器" class="headerlink" title="2.1、复合选择器"></a>2.1、复合选择器</h5><ul>
<li>标签选择器和类选择器、标签选择器和id选择器，一起使用（不用空格或逗号）</li>
<li>必须同时满足两个条件样式才生效<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">h1</span><span class="hljs-selector-class">.class1</span> &#123;<br>&#125;<br><span class="hljs-selector-tag">h1</span><span class="hljs-selector-id">#id1</span> &#123;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="2-2、多元素（并集）选择器"><a href="#2-2、多元素（并集）选择器" class="headerlink" title="2.2、多元素（并集）选择器"></a>2.2、多元素（并集）选择器</h5><ul>
<li>E,F</li>
<li>同时匹配所有E元素和F元素，E和F之间用逗号隔开</li>
</ul>
<h5 id="2-3、后代选择器"><a href="#2-3、后代选择器" class="headerlink" title="2.3、后代选择器"></a>2.3、后代选择器</h5><ul>
<li>E F</li>
<li>匹配所有属于E元素后代的F元素，E和F之间用空格隔开（匹配所有后代）</li>
</ul>
<h5 id="2-4、子元素选择器"><a href="#2-4、子元素选择器" class="headerlink" title="2.4、子元素选择器"></a>2.4、子元素选择器</h5><ul>
<li>E&gt;F</li>
<li>匹配所有E元素子代的F元素（只匹配子代）</li>
</ul>
<h5 id="2-5、兄弟元素选择器"><a href="#2-5、兄弟元素选择器" class="headerlink" title="2.5、兄弟元素选择器"></a>2.5、兄弟元素选择器</h5><ul>
<li>E~F<ul>
<li>一般兄弟选择器，匹配E元素只有所有的同级元素F</li>
</ul>
</li>
<li>E+F<ul>
<li>紧邻兄弟选择器，匹配紧随E元素之后的同级元素F</li>
</ul>
</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="css"></span><br><span class="css">// 只匹配第四个<span class="hljs-selector-tag">p</span>标签</span><br><span class="css"><span class="hljs-selector-class">.p3</span>+<span class="hljs-selector-tag">p</span> &#123;</span><br><span class="css">  <span class="hljs-attribute">background-color</span>: purple;</span><br><span class="css">&#125;</span><br><span class="css">// 匹配<span class="hljs-selector-class">.p3</span>之后的所有同级<span class="hljs-selector-tag">p</span>标签</span><br><span class="css"><span class="hljs-selector-class">.p3</span>~<span class="hljs-selector-tag">p</span> &#123;</span><br><span class="css">    <span class="hljs-attribute">background-color</span>: purple;</span><br><span class="css">&#125;</span><br><span class="css"></span><br><span class="css">// <span class="hljs-selector-class">.p3</span>之后的紧邻元素中没有<span class="hljs-selector-class">.p5</span>，所以没有匹配项</span><br><span class="css"><span class="hljs-selector-class">.p3</span>+<span class="hljs-selector-class">.p5</span> &#123;</span><br><span class="css">  <span class="hljs-attribute">background-color</span>: purple;</span><br><span class="css">&#125;</span><br><span class="css">// 匹配<span class="hljs-selector-class">.p3</span>之后的所有同级<span class="hljs-selector-class">.p5</span></span><br><span class="css"><span class="hljs-selector-class">.p3</span>~<span class="hljs-selector-class">.p5</span> &#123;</span><br><span class="css">  <span class="hljs-attribute">background-color</span>: purple;</span><br><span class="css">&#125;</span><br><span class="css"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>1<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;p5&quot;</span>&gt;</span>2<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;p3&quot;</span>&gt;</span>3<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>4<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;p5&quot;</span>&gt;</span>5<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h5 id="2-6、属性选择器"><a href="#2-6、属性选择器" class="headerlink" title="2.6、属性选择器"></a>2.6、属性选择器</h5><ul>
<li>E[att=val]</li>
<li>匹配所有att属性等于“val”的E元素</li>
</ul>
<h5 id="2-7、伪类选择器（一般用于a标签）"><a href="#2-7、伪类选择器（一般用于a标签）" class="headerlink" title="2.7、伪类选择器（一般用于a标签）"></a>2.7、伪类选择器（一般用于a标签）</h5><ul>
<li>:link 未访问的链接</li>
<li>:visited 已访问的链接</li>
<li>:hover 鼠标悬浮在链接上</li>
<li>:active 选定的链接</li>
</ul>
<h5 id="2-8、伪元素选择器"><a href="#2-8、伪元素选择器" class="headerlink" title="2.8、伪元素选择器"></a>2.8、伪元素选择器</h5><ul>
<li>::first-letter 第一个字符的样式</li>
<li>::first-line 第一行的样式</li>
<li>::before 在元素内容最前面添加的内容，需要配合content属性使用</li>
<li>::after 在元素内容最后面添加的内容，需要配合content属性使用<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">p</span>:before &#123;<br>    content: <span class="hljs-string">&#x27;添加的内容&#x27;</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="3、选择器优先级"><a href="#3、选择器优先级" class="headerlink" title="3、选择器优先级"></a>3、选择器优先级</h4><ul>
<li>行内样式&gt;id选择器&gt;类选择器&gt;标签选择器</li>
<li>!important，使某个样式有最高优先级（比行内样式还要高，一般用在css覆盖javascript设置上）<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.class1</span> &#123;<br>    <span class="hljs-attribute">color</span>: red <span class="hljs-meta">!important</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h3 id="三、常用css属性"><a href="#三、常用css属性" class="headerlink" title="三、常用css属性"></a>三、常用css属性</h3><h4 id="1、字体属性"><a href="#1、字体属性" class="headerlink" title="1、字体属性"></a>1、字体属性</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="字体属性"></p>
<h4 id="2、文本属性"><a href="#2、文本属性" class="headerlink" title="2、文本属性"></a>2、文本属性</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="文本属性"></p>
<h4 id="3、背景属性"><a href="#3、背景属性" class="headerlink" title="3、背景属性"></a>3、背景属性</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E8%83%8C%E6%99%AF%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="背景属性"></p>
<h4 id="4、列表属性"><a href="#4、列表属性" class="headerlink" title="4、列表属性"></a>4、列表属性</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%88%97%E8%A1%A8%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="列表属性"></p>
<h4 id="5、表格属性"><a href="#5、表格属性" class="headerlink" title="5、表格属性"></a>5、表格属性</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E8%A1%A8%E6%A0%BC%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="表格属性"></p>
<h3 id="四、元素实际占用空间"><a href="#四、元素实际占用空间" class="headerlink" title="四、元素实际占用空间"></a>四、元素实际占用空间</h3><p><strong>元素实际占用空间 = 宽/高 + 内边距 + 边框 + 外边距</strong></p>
<h3 id="五、定位position（重点）"><a href="#五、定位position（重点）" class="headerlink" title="五、定位position（重点）"></a>五、<a target="_blank" rel="noopener" href="https://www.cnblogs.com/qianguyihao/p/8296748.html">定位position（重点）</a></h3><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%AE%9A%E4%BD%8D%E7%B1%BB%E5%9E%8B.png" srcset="/img/loading.gif" lazyload alt="定位类型"></p>
<h4 id="1、相对定位relative（不脱标，占位置）"><a href="#1、相对定位relative（不脱标，占位置）" class="headerlink" title="1、相对定位relative（不脱标，占位置）"></a>1、相对定位relative（不脱标，占位置）</h4><ul>
<li>相对定位：让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）</li>
<li>相对定位特点：<ol>
<li>它是相对于自己原本的位置来移动的（移动位置的时候参照点是自己原来的位置）</li>
<li>在标准流中占有位置，后面的盒子仍然以标准流的方式对待它（不脱标，标准流中占有位置）</li>
</ol>
</li>
<li>相对定位用途：<ol>
<li>微调元素</li>
<li>做绝对定位的参考</li>
</ol>
</li>
<li>相对定位的定位值（值为正数，负数则相反）<ul>
<li>left：盒子右移</li>
<li>right：盒子左移</li>
<li>top：盒子下移</li>
<li>bottom：盒子上移</li>
</ul>
</li>
</ul>
<h4 id="2、绝对定位absolute（脱标，不占位置）"><a href="#2、绝对定位absolute（脱标，不占位置）" class="headerlink" title="2、绝对定位absolute（脱标，不占位置）"></a>2、绝对定位absolute（脱标，不占位置）</h4><ul>
<li>绝对定位：定义横纵坐标，原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。</li>
<li>绝对定位之后，标签就不区分所谓的行内元素、块级元素了，不需要display:block就可以设置宽高了</li>
</ul>
<h5 id="2-1、以浏览器为参考点（当祖先元素没有定位时）"><a href="#2-1、以浏览器为参考点（当祖先元素没有定位时）" class="headerlink" title="2.1、以浏览器为参考点（当祖先元素没有定位时）"></a>2.1、以浏览器为参考点（当祖先元素没有定位时）</h5><ul>
<li>横坐标用left描述</li>
<li>纵坐标如果用top描述，那参考点就是页面的左上角，而不是浏览器的左上角</li>
<li>纵坐标如果用bottom描述，那参考点就是浏览器首屏窗口尺寸<br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%8F%82%E8%80%83%E7%82%B91.png" srcset="/img/loading.gif" lazyload alt="绝对定位参考点">  <img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%8F%82%E8%80%83%E7%82%B92.png" srcset="/img/loading.gif" lazyload alt="绝对定位参考点"></li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%8F%82%E8%80%83%E7%82%B9%E9%97%AE%E9%A2%98.png" srcset="/img/loading.gif" lazyload alt="绝对定位参考点问题"></p>
<h5 id="2-2、以盒子为参考点"><a href="#2-2、以盒子为参考点" class="headerlink" title="2.2、以盒子为参考点"></a>2.2、以盒子为参考点</h5><ul>
<li>一个绝对定位的元素，如果父辈元素中也出现了定位（无论是绝对定位、相对定位、固定定位）的元素，那将以该祖先元素为参考点<ul>
<li>最近的已定位的祖先元素，不一定是父亲</li>
<li>祖先元素不一定是相对定位</li>
<li>绝对定位的儿子，无视参考盒子的padding<br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E4%BB%A5%E7%9B%92%E5%AD%90%E4%B8%BA%E5%8F%82%E8%80%83%E7%82%B9.png" srcset="/img/loading.gif" lazyload alt="绝对定位以盒子为参考点"></li>
</ul>
</li>
</ul>
<h5 id="2-3、让绝对定位的盒子居中"><a href="#2-3、让绝对定位的盒子居中" class="headerlink" title="2.3、让绝对定位的盒子居中"></a>2.3、让绝对定位的盒子居中</h5><ul>
<li>如果想让一个标准文档流中的盒子居中（水平方向看），可以将其设置margin: 0 auto;属性</li>
<li>可当盒子使用绝对定位时，它已经脱离了标准文档流，让它居中可以使用如下方法（left: 50%; margin-left: 负的宽度的一半）：<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span> &#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">60px</span>;<br>    <span class="hljs-attribute">position</span>: absolute; <span class="hljs-comment">/* 绝对定位的盒子 */</span> <br>    <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span>;            <span class="hljs-comment">/* 首先让左边线居中 */</span><br>    <span class="hljs-attribute">top</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">margin-left</span>: -<span class="hljs-number">300px</span>; <span class="hljs-comment">/* 然后左移宽度（600px）的一半*/</span><br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h4 id="3、固定定位fixed（脱标，不占位置）"><a href="#3、固定定位fixed（脱标，不占位置）" class="headerlink" title="3、固定定位fixed（脱标，不占位置）"></a>3、固定定位fixed（脱标，不占位置）</h4><ul>
<li>固定定位：相对浏览器窗口进行定位，无论页面怎么滚动，这个盒子显示的位置不变（IE6不兼容）</li>
<li>固定定位特点：<ol>
<li>以浏览器的可视窗口为参照点移动元素<ul>
<li>跟父元素没有任何关系</li>
<li>不随滚动条滚动</li>
</ul>
</li>
<li>固定定位不再占有原先的位置<ul>
<li>固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位</li>
</ul>
</li>
</ol>
</li>
<li>用途：<ul>
<li>网页右下角的“返回顶部”</li>
<li>顶部导航条（假设顶部导航条的高度是60px，为了防止其他的内容被导航条覆盖，我们要给body标签设置60px的padding-top）</li>
</ul>
</li>
</ul>
<h5 id="3-1、固定定位小技巧（固定在版心右侧位置）"><a href="#3-1、固定定位小技巧（固定在版心右侧位置）" class="headerlink" title="3.1、固定定位小技巧（固定在版心右侧位置）"></a>3.1、固定定位小技巧（固定在版心右侧位置）</h5><p>小技巧：</p>
<ol>
<li>让固定定位的盒子<code>left: 50%;</code>，走到浏览器可视区（也可以看做版心）的一半位置</li>
<li>让固定定位的盒子<code>margin-left: 版心宽度的一半距离</code>，多走版心宽度的一半位置，就可以让固定定位的盒子贴着版心右侧对齐了</li>
</ol>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D%E5%B0%8F%E6%8A%80%E5%B7%A7.png" srcset="/img/loading.gif" lazyload alt="固定定位小技巧"></p>
<h4 id="4、z-index属性"><a href="#4、z-index属性" class="headerlink" title="4、z-index属性"></a>4、z-index属性</h4><ul>
<li>z-index属性（不能加单位）：表示谁压着谁，数值大的压盖数值小的</li>
<li>特性：<ul>
<li>数值大的位于上层，数值小的位于下层</li>
<li>z-index值没有单位，就是一个正整数，默认值为auto</li>
<li>如果大家都没有z-index值，或z-index值一样，那么在HTML代码里写在后面就能在上面压住别人。定位了的元素永远能够压住没有定位的元素</li>
<li>只有定位了的元素才有z-index值</li>
<li>从父现象：如果父亲1比父亲2大，那么即使儿子1比儿子2小，儿子1也在上层</li>
</ul>
</li>
</ul>
<h4 id="5、粘性定位-sticky"><a href="#5、粘性定位-sticky" class="headerlink" title="5、粘性定位 sticky"></a>5、粘性定位 sticky</h4><ul>
<li>粘性定位可以被认为是相对定位和固定定位的混合。先相对定位，页面滚动到一定距离变为固定定位（一般使用js实现，而不是sticky）</li>
<li>粘性定位的特点：<ol>
<li>以浏览器的可视窗口为参照点移动元素（固定定位特点）</li>
<li>粘性定位占有原来的位置（相对定位的特点）</li>
<li>必须添加top、left、right、bottom其中一个才有效</li>
</ol>
</li>
<li>跟页面滚动搭配使用。兼容性较差，IE不支持</li>
</ul>
<h4 id="6、定位的拓展"><a href="#6、定位的拓展" class="headerlink" title="6、定位的拓展"></a>6、定位的拓展</h4><h5 id="6-1、定位特殊特性"><a href="#6-1、定位特殊特性" class="headerlink" title="6.1、定位特殊特性"></a>6.1、定位特殊特性</h5><p>绝对定位和固定定位也和浮动类似</p>
<ol>
<li>行内元素添加绝对或者固定定位，可以直接设置高度和宽度</li>
<li>块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小</li>
</ol>
<h5 id="6-2、脱标的盒子不会触发外边距塌陷"><a href="#6-2、脱标的盒子不会触发外边距塌陷" class="headerlink" title="6.2、脱标的盒子不会触发外边距塌陷"></a>6.2、脱标的盒子不会触发外边距塌陷</h5><ul>
<li>浮动元素、绝对定位（固定定位）元素都不会触发外边距合并的问题</li>
</ul>
<h5 id="6-3、绝对定位（固定定位）会完全压住盒子"><a href="#6-3、绝对定位（固定定位）会完全压住盒子" class="headerlink" title="6.3、绝对定位（固定定位）会完全压住盒子"></a>6.3、绝对定位（固定定位）会完全压住盒子</h5><ul>
<li>浮动元素只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字（图片）<ul>
<li>浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动的元素</li>
</ul>
</li>
<li>绝对定位（固定定位）会压住下面标准流所有的内容</li>
</ul>
<h5 id="6-4、如果一个盒子有left属性也有right属性，则默认会执行left属性（top和buttom会执行top属性）"><a href="#6-4、如果一个盒子有left属性也有right属性，则默认会执行left属性（top和buttom会执行top属性）" class="headerlink" title="6.4、如果一个盒子有left属性也有right属性，则默认会执行left属性（top和buttom会执行top属性）"></a>6.4、如果一个盒子有left属性也有right属性，则默认会执行left属性（top和buttom会执行top属性）</h5><h3 id="六、浮动（重点）"><a href="#六、浮动（重点）" class="headerlink" title="六、浮动（重点）"></a>六、<a target="_blank" rel="noopener" href="https://www.cnblogs.com/qianguyihao/p/7297736.html">浮动（重点）</a></h3><h4 id="1、标准文档流"><a href="#1、标准文档流" class="headerlink" title="1、标准文档流"></a>1、标准文档流</h4><h5 id="1-1、标准文档流的特性"><a href="#1-1、标准文档流的特性" class="headerlink" title="1.1、标准文档流的特性"></a>1.1、标准文档流的特性</h5><ul>
<li>1）空白折叠现象，无论多少个空格、换行、tab，都会折叠为一个空格</li>
<li>2）高低不齐，底边对齐（如文字和图片高度不同时，采用底部对齐）</li>
<li>3）自动换行</li>
</ul>
<h5 id="1-2、行内元素和块级元素的区别"><a href="#1-2、行内元素和块级元素的区别" class="headerlink" title="1.2、行内元素和块级元素的区别"></a>1.2、行内元素和块级元素的区别</h5><ul>
<li>行内元素：<ul>
<li>与其他行内元素并排</li>
<li>不能设置宽高，默认的宽度就是文字的宽度</li>
</ul>
</li>
<li>块级元素：<ul>
<li>独占一行，不能与其他元素并列</li>
<li>可以设置宽高，默认宽度为父元素的100%</li>
</ul>
</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E4%B8%8E%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0.png" srcset="/img/loading.gif" lazyload alt="行内元素与块级元素"></p>
<h5 id="1-3、行内元素和块级元素的相互转换"><a href="#1-3、行内元素和块级元素的相互转换" class="headerlink" title="1.3、行内元素和块级元素的相互转换"></a>1.3、行内元素和块级元素的相互转换</h5><ul>
<li>块级元素转行内元素：display: inline;</li>
<li>行内元素转块级元素：display: block;</li>
</ul>
<h5 id="1-4、脱离标准流三种方式"><a href="#1-4、脱离标准流三种方式" class="headerlink" title="1.4、脱离标准流三种方式"></a>1.4、脱离标准流三种方式</h5><ul>
<li>浮动</li>
<li>绝对定位</li>
<li>固定定位</li>
</ul>
<h4 id="2、浮动的性质（不占位置）"><a href="#2、浮动的性质（不占位置）" class="headerlink" title="2、浮动的性质（不占位置）"></a>2、浮动的性质（不占位置）</h4><h5 id="2-1、浮动元素会脱标"><a href="#2-1、浮动元素会脱标" class="headerlink" title="2.1、浮动元素会脱标"></a>2.1、浮动元素会脱标</h5><ul>
<li>脱离标准文档流的控制（浮）移动到指定位置（动），俗称脱标</li>
<li>浮动的盒子不再保留原先的位置</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E6%BC%94%E7%A4%BA1.png" srcset="/img/loading.gif" lazyload alt="浮动演示1"></p>
<h5 id="2-2、浮动元素一行显示且元素顶部对齐"><a href="#2-2、浮动元素一行显示且元素顶部对齐" class="headerlink" title="2.2、浮动元素一行显示且元素顶部对齐"></a>2.2、浮动元素一行显示且元素顶部对齐</h5><p>如果多个盒子都设置了浮动，则它们会按照属性值一行内显示且顶端对齐排列</p>
<p><strong>注意</strong>：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E6%BC%94%E7%A4%BA2.png" srcset="/img/loading.gif" lazyload alt="浮动演示2"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E6%BC%94%E7%A4%BA3.png" srcset="/img/loading.gif" lazyload alt="浮动演示3"></p>
<h5 id="2-3、浮动元素具有行内块元素特性"><a href="#2-3、浮动元素具有行内块元素特性" class="headerlink" title="2.3、浮动元素具有行内块元素特性"></a>2.3、浮动元素具有行内块元素特性</h5><p>任何元素都可以浮动，不管原先是什么模式的元素，添加浮动后具有行内块元素相似的特性</p>
<ul>
<li>如果块级元素没有设置宽度，默认宽度和父元素一样宽，但是添加浮动后，它的大小根据内容决定</li>
<li>浮动的元素中间没有缝隙，是紧挨在一起的</li>
<li>行内元素同理</li>
</ul>
<h4 id="3、浮动的清除（清除浮动元素造成的影响）"><a href="#3、浮动的清除（清除浮动元素造成的影响）" class="headerlink" title="3、浮动的清除（清除浮动元素造成的影响）"></a>3、浮动的清除（清除浮动元素造成的影响）</h4><h5 id="3-0、为什么要清除浮动"><a href="#3-0、为什么要清除浮动" class="headerlink" title="3.0、为什么要清除浮动"></a>3.0、为什么要清除浮动</h5><ul>
<li>由于父级盒子很多情况下不方便给高度，但是子盒子浮动又不占用位置，最后父级盒子高度为0时，就会影响下面的标准流盒子</li>
<li>由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8.png" srcset="/img/loading.gif" lazyload alt="清除浮动"></p>
<h5 id="3-1、清除浮动本质"><a href="#3-1、清除浮动本质" class="headerlink" title="3.1、清除浮动本质"></a>3.1、清除浮动本质</h5><ul>
<li>清除浮动的本质是清除浮动元素造成的影响</li>
<li>如果父盒子本身有高度，则不需要清除浮动</li>
<li>清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了</li>
</ul>
<h5 id="3-2、方法一：额外标签法（不常用）"><a href="#3-2、方法一：额外标签法（不常用）" class="headerlink" title="3.2、方法一：额外标签法（不常用）"></a>3.2、方法一：额外标签法（不常用）</h5><p>额外标签法也称为隔墙法。</p>
<ul>
<li>使用：在浮动元素末尾添加一个空标签，添加样式<code>clear: both</code>，例如<code>&lt;div style=&quot;clear: both&quot;&gt;&lt;/div&gt;</code>，或者其他标签（如<br/>等）</li>
<li>优点：通俗易懂，书写方便</li>
<li>缺点：添加许多无意义的标签，结构化较差</li>
</ul>
<p><strong>注意</strong>：要求这个新的空标签必须是块级元素</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E9%A2%9D%E5%A4%96%E6%A0%87%E7%AD%BE%E6%B3%951.png" srcset="/img/loading.gif" lazyload alt="额外标签法1"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E9%A2%9D%E5%A4%96%E6%A0%87%E7%AD%BE%E6%B3%952.png" srcset="/img/loading.gif" lazyload alt="额外标签法2"></p>
<h5 id="3-3、方法二：父元素overflow（重点）"><a href="#3-3、方法二：父元素overflow（重点）" class="headerlink" title="3.3、方法二：父元素overflow（重点）"></a>3.3、方法二：父元素overflow（重点）</h5><ul>
<li>使用：给父元素添加overflow属性，将其属性值设置为hidden（常用）、auto或scroll</li>
<li>优点：代码简介</li>
<li>缺点：无法显示溢出的部分</li>
<li>overflow:hidden能够清除浮动的原因是开启了BFC,利用BFC计算高度时浮动元素也参与计算的特性</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%88%B6%E5%85%83%E7%B4%A0overflow1.png" srcset="/img/loading.gif" lazyload alt="父元素overflow1"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%88%B6%E5%85%83%E7%B4%A0overflow2.png" srcset="/img/loading.gif" lazyload alt="父元素overflow2"></p>
<h5 id="3-4、方法三：-after伪元素法（重点，代表网站：百度、淘宝、网易等）"><a href="#3-4、方法三：-after伪元素法（重点，代表网站：百度、淘宝、网易等）" class="headerlink" title="3.4、方法三：:after伪元素法（重点，代表网站：百度、淘宝、网易等）"></a>3.4、方法三：:after伪元素法（重点，代表网站：百度、淘宝、网易等）</h5><p>:after方式是额外标签法的升级版</p>
<ul>
<li>使用：给父元素添加如下属性<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.clearflix</span>:after &#123;<br>    content: <span class="hljs-string">&#x27;&#x27;</span>;<br>    <span class="hljs-attribute">display</span>: block;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">clear</span>: both;<br>    <span class="hljs-attribute">visibility</span>: hidden;<br>&#125;<br><span class="hljs-comment">/* 兼容IE6、7 */</span><br><span class="hljs-selector-class">.clearfix</span> &#123;<br>    *zoom: <span class="hljs-number">1</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
<li>原理：通过css在子元素末尾添加一个块级空标签，并设置<code>clear: both;</code>属性</li>
<li>优点：没有增加标签，结构更简单</li>
<li>缺点：照顾低版本浏览器</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/after%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B3%951.png" srcset="/img/loading.gif" lazyload alt="after伪元素法1"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/after%E4%BC%AA%E5%85%83%E7%B4%A0%E6%B3%952.png" srcset="/img/loading.gif" lazyload alt="after伪元素法2"></p>
<h5 id="3-5、方法四：双伪元素（重点，代表网站：小米、腾讯等）"><a href="#3-5、方法四：双伪元素（重点，代表网站：小米、腾讯等）" class="headerlink" title="3.5、方法四：双伪元素（重点，代表网站：小米、腾讯等）"></a>3.5、方法四：双伪元素（重点，代表网站：小米、腾讯等）</h5><ul>
<li>使用：给父元素添加如下属性<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.clearfix</span>:before, .clearfix:after &#123;<br>    content: <span class="hljs-string">&quot;&quot;</span>;<br>    <span class="hljs-attribute">display</span>: table;<br>&#125;<br><span class="hljs-selector-class">.clearfix</span>:after &#123;<br>    clear: both;<br>&#125;<br><span class="hljs-comment">/* 兼容IE6、7 */</span><br><span class="hljs-selector-class">.clearfix</span> &#123;<br>    *zoom: <span class="hljs-number">1</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
<li>原理：通过css在子元素的起始和末尾都添加一个空标签，并设置<code>clear: both;</code>属性</li>
<li>优点：代码更简介</li>
<li>缺点：照顾低版本浏览器</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%8F%8C%E4%BC%AA%E5%85%83%E7%B4%A01.png" srcset="/img/loading.gif" lazyload alt="双伪元素1"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%8F%8C%E4%BC%AA%E5%85%83%E7%B4%A02.png" srcset="/img/loading.gif" lazyload alt="双伪元素2"></p>
<h4 id="4、IE6兼容性问题"><a href="#4、IE6兼容性问题" class="headerlink" title="4、IE6兼容性问题"></a>4、IE6兼容性问题</h4><h5 id="4-1、IE6不支持height小于12px的盒子"><a href="#4-1、IE6不支持height小于12px的盒子" class="headerlink" title="4.1、IE6不支持height小于12px的盒子"></a>4.1、IE6不支持height小于12px的盒子</h5><ul>
<li><p>问题：设置一个height为5px、width为200px，IE 8和IE 6的显示效果如下：</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/ie%E5%85%BC%E5%AE%B91.png" srcset="/img/loading.gif" lazyload alt="ie兼容1"></p>
</li>
<li><p>解决方法：将盒子的字号大小设置为小于盒子的高，比如：盒子高为5px，就把_font-size（给css属性前加上下划线，就是IE6的专有属性）设置为0px（0px&lt;5px）</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span> &#123;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">5px</span>;<br>    _font-size: <span class="hljs-number">0px</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="4-2、IE6不支持overflow-hidden-清除浮动"><a href="#4-2、IE6不支持overflow-hidden-清除浮动" class="headerlink" title="4.2、IE6不支持overflow: hidden;清除浮动"></a>4.2、IE6不支持overflow: hidden;清除浮动</h5><ul>
<li>问题：<code>overflow: hidden;</code>让溢出盒子border的内容隐藏，这个功能IE6是支持的，不兼容的是用它来清除浮动</li>
<li>解决方法：追加一条<code>_zoom: 1;</code>属性，<code>_zoom: 1;</code>能触发浏览器的hasLayout机制（这个机制只有IE6有，不用深究）。<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-tag">div</span> &#123;<br>    <span class="hljs-attribute">overflow</span>: hidden;<br>    _zoom: <span class="hljs-number">1</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
<h5 id="4-3、IE6的双倍margin的bug"><a href="#4-3、IE6的双倍margin的bug" class="headerlink" title="4.3、IE6的双倍margin的bug"></a>4.3、IE6的双倍margin的bug</h5><ul>
<li><p>问题：当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素会出现双倍margin。</p>
<p>  <img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/ie%E5%85%BC%E5%AE%B93.png" srcset="/img/loading.gif" lazyload alt="ie兼容3"></p>
</li>
<li><p>解决方法：</p>
<ul>
<li>1）使浮动方向与margin方向相反（推荐，作为习惯）</li>
<li>2）单独给队首元素设置一半的margin<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 方法一 */</span><br><span class="hljs-selector-tag">div</span> &#123;<br>    <span class="hljs-attribute">float</span>: left;<br>    <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">40px</span><br>&#125;<br><br><span class="hljs-comment">/* 方法二 */</span><br><span class="hljs-selector-tag">div</span> &#123;<br>    _margin-<span class="hljs-attribute">left</span>: <span class="hljs-number">20px</span>;<br>&#125;<br></code></pre></td></tr></table></figure></li>
</ul>
</li>
</ul>
<h5 id="4-4、IE6-3px的bug"><a href="#4-4、IE6-3px的bug" class="headerlink" title="4.4、IE6 3px的bug"></a>4.4、IE6 3px的bug</h5><ul>
<li><p>问题：儿子右浮动，且设置margin-right为10px，结果变为13px。</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/ie%E5%85%BC%E5%AE%B94.png" srcset="/img/loading.gif" lazyload alt="ie兼容4"></p>
</li>
<li><p>解决方法：出现3px的bug说明代码不标准，在描述父子间的距离时，使用padding，而不是margin</p>
</li>
</ul>
<h4 id="5、margin相关问题"><a href="#5、margin相关问题" class="headerlink" title="5、margin相关问题"></a>5、margin相关问题</h4><h5 id="5-1、margin塌陷-margin重叠"><a href="#5-1、margin塌陷-margin重叠" class="headerlink" title="5.1、margin塌陷/margin重叠"></a>5.1、margin塌陷/margin重叠</h5><ul>
<li><p>标准文档流中，垂直方向的margin不叠加，取较大的值作为margin（水平方向的margin可以叠加，即水平方向没有塌陷现象）。如下图所示：</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/margin%E5%A1%8C%E9%99%B7.png" srcset="/img/loading.gif" lazyload alt="margin塌陷"></p>
</li>
<li><p>如果不在标准文档流中，如盒子都浮动了，那两个盒子之间就没有塌陷现象。</p>
</li>
</ul>
<h5 id="5-2、盒子居中margin-0-auto"><a href="#5-2、盒子居中margin-0-auto" class="headerlink" title="5.2、盒子居中margin: 0 auto;"></a>5.2、盒子居中<code>margin: 0 auto;</code></h5><ul>
<li>上下的margin为0，左右的margin都尽可能的大，于是就居中了</li>
<li>注意：<ul>
<li>1）只有标准流的盒子才能使用<code>margin: 0 auto;</code>居中。当盒子浮动、绝对定位、固定定位都不能使用</li>
<li>2）使用<code>margin: 0 auto;</code>的盒子，必须有明确的width</li>
<li>3）<code>margin: 0 auto;</code>是让盒子居中，不是让盒子中的文本居中。文本居中要使用<code>text-align: center;</code></li>
</ul>
</li>
</ul>
<h5 id="5-3、描述父子之间距离时，善用父亲的padding，而不是儿子的margin"><a href="#5-3、描述父子之间距离时，善用父亲的padding，而不是儿子的margin" class="headerlink" title="5.3、描述父子之间距离时，善用父亲的padding，而不是儿子的margin"></a>5.3、描述父子之间距离时，善用父亲的padding，而不是儿子的margin</h5><ul>
<li><p>margin这个属性，本质上描述的是兄弟和兄弟之间的距离；最好不要用这个marign表达父子之间的距离。</p>
</li>
<li><p>问题：通过儿子的margin-top属性让其与父亲保持一定的上边距（父亲为设置border属性），却让父亲也有了margin-top属性。如下例所示：</p>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%AD%90%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AEmargin.png" srcset="/img/loading.gif" lazyload alt="子元素设置margin"> <img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%88%B6%E5%85%83%E7%B4%A0%E8%AE%BE%E7%BD%AEborder%E5%AD%90%E5%85%83%E7%B4%A0%E5%86%8D%E8%AE%BE%E7%BD%AEmargin.png" srcset="/img/loading.gif" lazyload alt="父元素设置border子元素再设置margin"></p>
</li>
</ul>
<h4 id="6、浮动元素布局注意点"><a href="#6、浮动元素布局注意点" class="headerlink" title="6、浮动元素布局注意点"></a>6、浮动元素布局注意点</h4><h5 id="6-1、浮动和标准流的父盒子搭配"><a href="#6-1、浮动和标准流的父盒子搭配" class="headerlink" title="6.1、浮动和标准流的父盒子搭配"></a>6.1、浮动和标准流的父盒子搭配</h5><ul>
<li>先用标准流的父元素排列上下位置，之后内部的子元素采用浮动排列左右位置</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%B5%AE%E5%8A%A8%E5%92%8C%E6%A0%87%E5%87%86%E6%B5%81%E7%88%B6%E7%9B%92%E5%AD%90.png" srcset="/img/loading.gif" lazyload alt="浮动和标准流父盒子"></p>
<h5 id="6-2、一个元素浮动了，理论上其余的兄弟元素也要浮动"><a href="#6-2、一个元素浮动了，理论上其余的兄弟元素也要浮动" class="headerlink" title="6.2、一个元素浮动了，理论上其余的兄弟元素也要浮动"></a>6.2、一个元素浮动了，理论上其余的兄弟元素也要浮动</h5><ul>
<li>一个盒子里面有多个子盒子，其中一个盒子浮动了，那么其他的兄弟元素也应该浮动，以防止引起问题</li>
<li>浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流</li>
</ul>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E4%B8%80%E4%B8%AA%E7%9B%92%E5%AD%90%E6%B5%AE%E5%8A%A8.png" srcset="/img/loading.gif" lazyload alt="一个盒子浮动"><br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%A4%9A%E4%B8%AA%E7%9B%92%E5%AD%90%E6%B5%AE%E5%8A%A8.png" srcset="/img/loading.gif" lazyload alt="多个盒子浮动"></p>
<h3 id="七、其他css属性"><a href="#七、其他css属性" class="headerlink" title="七、其他css属性"></a>七、其他css属性</h3><h4 id="1、元素的显示和隐藏"><a href="#1、元素的显示和隐藏" class="headerlink" title="1、元素的显示和隐藏"></a>1、元素的显示和隐藏</h4><h5 id="1-1、display（设置元素是否显示，以及是否独占一行）"><a href="#1-1、display（设置元素是否显示，以及是否独占一行）" class="headerlink" title="1.1、display（设置元素是否显示，以及是否独占一行）"></a>1.1、display（设置元素是否显示，以及是否独占一行）</h5><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/display%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="display属性"></p>
<h5 id="1-2、-visibility（设置元素的显示和隐藏）"><a href="#1-2、-visibility（设置元素的显示和隐藏）" class="headerlink" title="1.2、 visibility（设置元素的显示和隐藏）"></a>1.2、 visibility（设置元素的显示和隐藏）</h5><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/visibility%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="visibility属性"></p>
<h5 id="1-3、区别"><a href="#1-3、区别" class="headerlink" title="1.3、区别"></a>1.3、区别</h5><ul>
<li>display隐藏时不再占据页面的空间，后面的元素会占用其位置</li>
<li>visibility隐藏时会占据页面中的空间，位置还保留在页面中，只是不显示</li>
</ul>
<h4 id="2、轮廓属性outline"><a href="#2、轮廓属性outline" class="headerlink" title="2、轮廓属性outline"></a>2、轮廓属性outline</h4><h5 id="2-1、简介"><a href="#2-1、简介" class="headerlink" title="2.1、简介"></a>2.1、简介</h5><ul>
<li>轮廓outline用于在元素周围绘制一个轮廓，位于border外围，可以突出显示元素</li>
<li>在浏览器中，当鼠标点击或使用tab键让一个表单或链接获取焦点时，该元素会有一个轮廓outline</li>
</ul>
<h5 id="2-2、常用属性"><a href="#2-2、常用属性" class="headerlink" title="2.2、常用属性"></a>2.2、常用属性</h5><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/outline%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="outline属性"></p>
<h5 id="2-3、outline和border的区别"><a href="#2-3、outline和border的区别" class="headerlink" title="2.3、outline和border的区别"></a>2.3、outline和border的区别</h5><ul>
<li>border可以引用与所有html元素，而outline主要用于表单元素、超链接元素</li>
<li>当元素获取焦点时会自动出现outline轮廓效果，当失去焦点时会自动消失，这是浏览器默认行为</li>
<li>outline不影响元素的尺寸和位置，而border会影响</li>
</ul>
<h4 id="3、最大-最小宽高"><a href="#3、最大-最小宽高" class="headerlink" title="3、最大/最小宽高"></a>3、最大/最小宽高</h4><ul>
<li>max-height：设置元素的最大高度</li>
<li>max-width：设置元素的最大宽度</li>
<li>min-height：设置元素的最小高度</li>
<li>min-width：设置元素的最小宽度</li>
</ul>
<h4 id="4、overflow属性（元素内容溢出时如何处理）"><a href="#4、overflow属性（元素内容溢出时如何处理）" class="headerlink" title="4、overflow属性（元素内容溢出时如何处理）"></a>4、overflow属性（元素内容溢出时如何处理）</h4><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/overflow%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="overflow属性"></p>
<h4 id="5、cursor属性（设置光标形状）"><a href="#5、cursor属性（设置光标形状）" class="headerlink" title="5、cursor属性（设置光标形状）"></a>5、cursor属性（设置光标形状）</h4><ul>
<li>default：默认光标，一般为箭头</li>
<li>pointer：手形，光标移动超链接上时一般显示为手形</li>
<li>move：可移动</li>
<li>text：文本</li>
<li>wait：等待</li>
<li>help：帮助<br><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/cursor%E5%B1%9E%E6%80%A7.png" srcset="/img/loading.gif" lazyload alt="cursor属性"></li>
</ul>
<h4 id="6、阴影"><a href="#6、阴影" class="headerlink" title="6、阴影"></a>6、阴影</h4><h5 id="6-1、盒子阴影"><a href="#6-1、盒子阴影" class="headerlink" title="6.1、盒子阴影"></a>6.1、盒子阴影</h5><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E7%9B%92%E5%AD%90%E9%98%B4%E5%BD%B1.png" srcset="/img/loading.gif" lazyload alt="盒子阴影"></p>
<h5 id="6-2、文字阴影"><a href="#6-2、文字阴影" class="headerlink" title="6.2、文字阴影"></a>6.2、文字阴影</h5><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E6%96%87%E5%AD%97%E9%98%B4%E5%BD%B1.png" srcset="/img/loading.gif" lazyload alt="文字阴影"></p>
<h3 id="八、css属性书写顺序"><a href="#八、css属性书写顺序" class="headerlink" title="八、css属性书写顺序"></a>八、css属性书写顺序</h3><p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/css%E5%B1%9E%E6%80%A7%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F.png" srcset="/img/loading.gif" lazyload alt="css属性书写顺序"></p>
<h3 id="九、外边距合并"><a href="#九、外边距合并" class="headerlink" title="九、外边距合并"></a>九、外边距合并</h3><p>使用margin定义块元素的垂直外边距时，可能会出现外边距合并</p>
<h4 id="1、相邻块元素垂直外边距的合并"><a href="#1、相邻块元素垂直外边距的合并" class="headerlink" title="1、相邻块元素垂直外边距的合并"></a>1、相邻块元素垂直外边距的合并</h4><p>当上下相邻的两个块元素（兄弟元素）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则<strong>它们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中的较大者</strong>，这种现象被称为相邻块元素垂直外边距的合并</p>
<p><strong>解决方案：</strong></p>
<ol>
<li>尽量只给一个盒子添加margin值</li>
<li>display: inline-block</li>
<li>float属性值不是”none”的元素</li>
<li>绝对定位</li>
</ol>
<p><img src="https://gitee.com/huqian025/my-images/raw/master/css/css%E5%9F%BA%E7%A1%80/%E5%A4%96%E8%BE%B9%E8%B7%9D%E5%90%88%E5%B9%B6.png" srcset="/img/loading.gif" lazyload alt="外边距合并"></p>
<h4 id="2、嵌套块元素垂直外边距的塌陷"><a href="#2、嵌套块元素垂直外边距的塌陷" class="headerlink" title="2、嵌套块元素垂直外边距的塌陷"></a>2、嵌套块元素垂直外边距的塌陷</h4><p>对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值</p>
<p><strong>解决方案：</strong></p>
<ol>
<li>可以为父元素定义上边框</li>
<li>可以为父元素定义上内边距</li>
<li>可以为父元素添加<code>overflow: hidden;</code></li>
<li>浮动、固定、绝对定位的盒子不会有塌陷问题</li>
</ol>
<blockquote>
<p>参考资料：</p>
<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/qianguyihao/p/8296748.html">CSS属性：定位属性（图文详解）</a></p>
<p><a target="_blank" rel="noopener" href="https://www.cnblogs.com/qianguyihao/p/7297736.html">CSS样式—-浮动（图文详解）</a></p>
<p><a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV14J4114768">pink老师前端视频</a></p>
</blockquote>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/css/">css</a>
                    
                  </div>
                
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/02/14/css%E9%AB%98%E7%BA%A7%E6%8A%80%E5%B7%A7/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">css高级技巧</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/02/14/grid%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80/">
                        <span class="hidden-mobile">grid网格布局</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  

  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/js/local-search.js" ></script>



  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  






  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


</body>
</html>
